<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.keyword" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="searchBycon">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>


    <!--双击弹出右侧框-->

      <el-drawer
          title="我嵌套了表格!"
          :visible.sync="table"
          direction="rtl"
          size="50%">
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
          <el-form :inline="true" :model="filters">
            <el-form-item>
              <el-button type="primary" @click="detailAdd" width="200">新增</el-button>
            </el-form-item>
          </el-form>
        </el-col>

        <el-table :data="details">
          <el-table-column property="id" label="编号" width="250"></el-table-column>
          <el-table-column property="name" label="明细名" width="250"></el-table-column>

          <el-table-column label="操作" width="200">
            <template scope="scope">
              <el-button size="small" @click="detailEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button type="danger" size="small" :current-page="detailcurrentpage" @click="detailDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>

        <el-col :span="24" class="toolbar">
          <el-pagination layout="prev, pager, next" @current-change="handledetailCurrentChange" :page-size="detailpageSize"
                         :total="detailTotal"
                         style="float:right;">
          </el-pagination>
        </el-col>

      </el-drawer>




    <!--列表-->
    <el-table :data="dtypes" highlight-current-row v-loading="listLoading" @row-dblclick="getDetails01"
              @selection-change="selsChange" style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="id" label="编号" width="120" >
      </el-table-column>
      <el-table-column prop="name" label="数据字典名" width="180"  >
      </el-table-column>
      <el-table-column prop="sn" label="英语名称" width="180" >
      </el-table-column>

      <el-table-column label="操作" width="200">
        <template scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" :current-page="currentpage" @click="handleDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <SPAN>{{currentpage}}</SPAN>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="deleteAll"  :disabled="this.sels.length===0">批量删除</el-button>
      <el-pagination layout="prev, pager, next"  :current-page="currentpage" @current-change="handleCurrentChange" :page-size="pageSize"
                     :total="total"
                     style="float:right;">
      </el-pagination>
    </el-col>

    <!--&lt;!&ndash;编辑界面&ndash;&gt;
    <el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="editForm.sex">
            <el-radio class="radio" :label="1">男</el-radio>
            <el-radio class="radio" :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker type="date" placeholder="选择日期" v-model="editForm.birth"></el-date-picker>
        </el-form-item>
        <el-form-item label="地址">
          <el-input type="textarea" v-model="editForm.addr"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>-->

    <!--新增界面-->
    <el-dialog :title='title' :visible.sync="addFormVisible" :close-on-click-modal="false">
      <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
        <el-form-item label="字典名" prop="name">
          <el-input v-model="addForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="英语名称" prop="sn">
          <el-input v-model="addForm.sn" auto-complete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>

    <!--小表新增-->
    <el-dialog :title='title' :visible.sync="detailFormVisible" :close-on-click-modal="false">

      <el-form :model="detailForm" label-width="80px" :rules="detailFormRules" ref="addForm">
        <el-form-item label="明细名" prop="name">
          <el-input v-model="detailForm.name" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="detailFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="detailSubmit" :loading="detailLoading">提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
//import util from '../../common/js/util'
//import NProgress from 'nprogress'
//import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';

export default {
  data() {
    return {
      filters: {
        keyword: ''
      },
      details:[],

      dtypes: [],
      total: 0,
      detailTotal:0,
      emps:[],
      detailpageSize:3,
      types_id:0,
      detailcurrentpage:1,
      pageSize:3,
      currentpage: 1,
      table:false,
      listLoading: false,
      sels: [],//列表选中列
      tree:[],
      title:'',
      detailName:'',
      editFormVisible: false,//编辑界面是否显示
      editLoading: false,
      editFormRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],

      },
      /*	//编辑界面数据
        editForm: {
          id: 0,
          name: '',
          sex: -1,
          age: 0,
          birth: '',
          addr: ''
        },
*/
      addFormVisible: false,//新增界面是否显示
      detailFormVisible:false,//小表是否显示
      addLoading: false,
      detailLoading:false,
      detailFormRules: {
        name: [
          { required: true, message: '请输入明细名', trigger: 'blur' }
        ],
      },
      addFormRules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' }
        ],
        sn: [
          { required: true, message: '请输入部门编号', trigger: 'blur' }
        ]
      },

      //新增界面数据
      addForm: {
        sn:'',
        name: '',
      },

      //小表新增
      detailForm: {
        name: '',
      }
    }
  },
  methods: {
    searchBycon(){
      this.currentpage=1
      this.getDtypes()
    },
   getDetails01:function(row){
      this.table=true
     this.types_id = row.id
      this.getDetails()
    },

    //获取小表
    getDetails(){
      this.table=true
      let para = {
        detailpageSize: this.detailpageSize,
        detailcurrentpage: this.detailcurrentpage,
        types_id:this.types_id
      };

      //console.log(para)
      this.$http.post('/dtype/detail',para).then((res)=>{
        console.log(res)
        this.details=res.data.rows
        this.detailTotal=res.data.totals
      }).catch()
    },

    //获取员工数据
    loadEmployees(){
      this.$http.get('/emp').then((res)=>{
        // console.log(res.data)
        this.emps=res.data;
      }).catch()
    },
    loadTree(){
      this.$http.get('/dept/tree').then((res)=>{
        // console.log(res.data)
        this.tree=res.data;
      }).catch()
    },
    //性别显示转换

    handleCurrentChange(val) {
      this.currentpage = val;
      this.getDtypes();
    },
    handledetailCurrentChange(val) {
      this.detailcurrentpage = val;
      this.getDetails();
    },

    //获取用户列表
    getDtypes() {
      let para = {
        currentpage: this.currentpage,
        pageSize: this.pageSize,
        keyword:this.filters.keyword
      };
      this.listLoading = false;
      //NProgress.start();
      this.$http.post("/dtype",para).then((res)=>{
        //console.log(res)
        this.dtypes = res.data.rows
        this.total = res.data.totals
      }).catch(()=>{

      })
    },
    //删除
    handleDel: function (row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        //NProgress.start();

        this.$http.delete("/dtype/"+row.id).then((res) => {
          this.listLoading = false;
          //NProgress.done();
          let {message,success} = res.data
          this.$message({
            message: message,
            type: success?'success':'error'
          });
          this.currentpage=1;
          this.getDtypes();
        });
      }).catch(() => {
      });
    },

   //小表删除
    detailDel: function (row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        //this.listLoading = true;
        //NProgress.start();
        this.$http.delete("/dtype/detail/"+row.id).then((res) => {
          //this.listLoading = false;
          //NProgress.done();
          console.log("+++"+res)
          let {message,success} = res.data
          this.$message({
            message: message,
            type: success?'success':'error'
          });
          this.detailcurrentpage=1;
          this.getDetails();
        });
      }).catch(() => {

      });
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      /*this.loadEmployees();
      this.loadTree();
      this.addFormVisible = true;
      this.title='编辑';
      this.addForm = Object.assign({}, row);
      let path = this.addForm.dirPath.split("/");
      let parr=[];
      for(let i=0;i<path.length-1;i++){
        parr.push(parseInt(path[i]))
      };
      this.addForm.parent=parr;*/
      //拉取数据
      /*this.loadEmployees();
      this.loadTree();*/

      this.title = "编辑";
      this.addFormVisible = true;
      this.addForm = Object.assign({}, row);
      //this.addForm.parent=[2,9]
      // 上级部门回显：  读出dirPath /3/54/55 a)
      //console.log(row)
     /* let path = this.addForm.dirPath.split("/");// ["","3","54","55"]
      let parr = [];
      // 获取除自身id添加到数组（构造一个整型数组）
      for (let i = 1; i < path.length - 1; i++) {
        parr.push(parseInt(path[i]));
      }
      //级联组件根据提供设置数组就 回显状态
      this.addForm.parent = parr;*/
    },
    detailEdit:function(index, row){
      this.title = "编辑";
      this.detailFormVisible = true;
      this.detailForm = Object.assign({}, row);
    },
    //显示新增界面
    handleAdd: function () {
      this.addFormVisible = true;
      /*this.loadEmployees();
      this.loadTree();*/
      this.title='新增';
      this.addForm = {
        sn:'',
        name: '',
      };
    },
    detailAdd: function () {
      this.detailFormVisible = true;
      /*this.loadEmployees();
      this.loadTree();*/
      this.title='新增';
      this.detailForm = {
        name: '',
        types_id:this.types_id
      };
    },
    //编辑
    /*	editSubmit: function () {
        this.$refs.editForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              this.editLoading = true;
              //NProgress.start();
              let para = Object.assign({}, this.editForm);
              para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
              editUser(para).then((res) => {
                this.editLoading = false;
                //NProgress.done();
                this.$message({
                  message: '提交成功',
                  type: 'success'
                });
                this.$refs['editForm'].resetFields();
                this.editFormVisible = false;
                this.getDtypes();
              });
            });
          }
        });
      },*/
    //新增
    addSubmit: function () {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            //console.log(this.addForm);
            this.addLoading = false;
            //NProgress.start();
            //para克隆表单数据
            let para = Object.assign({}, this.addForm);
            /*let arr = para.parent;
            if(arr!=null){
              let pid = arr[arr.length-1];
              para.parent={
                id:pid
              }
            }else{
              para.parent=null;
            }*/
            console.log("+++++++"+para);
            this.$http.put('/dtype',para).then((res) => {
              console.log(res)
              this.addLoading = false;
              //NProgress.done();
              let {message,success} = res.data
              this.$message({
                message: message,
                type: success?'success':'error'
              });

              //重置验证,关闭编辑框
              this.$refs['addForm'].resetFields();
              this.addFormVisible = false;
              this.currentpage=1;
              this.getDtypes();
            });
          });
        }
      });
    },

    detailSubmit: function () {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            //console.log(this.addForm);
            this.detailLoading = false;
            //NProgress.start();
            //para克隆表单数据
            let para= Object.assign({}, this.detailForm);
            //console.log(para);
            console.log(para)
            //console.log("sadfddgfds"+id)
            this.$http.put('/dtype/add',para).then((res) => {
              console.log(res)
              this.detailLoading = false;
              //NProgress.done();
              let {message,success} = res.data
              this.$message({
                message: message,
                type: success?'success':'error'
              });

              //重置验证,关闭编辑框detail
              //this.$refs['addForm'].resetFields();
              this.detailFormVisible = false;
              this.detailcurrentpage=1;
              console.log("12333");
              this.getDetails();
              console.log("566666")
            });
          });
        }
      });
    },
    selsChange: function (sels) {
      this.sels = sels;
      //console.log("++++++"+sels)
    },
    //批量删除
    deleteAll: function () {
      var ids = this.sels.map(item => item.id);
      //console.log("++++"+ids);
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        //NProgress.start();
        //let para = { ids: ids };
        this.$http.patch("/dept",ids).then((res) => {
          this.listLoading = false;
          //NProgress.done();
          let {success,message} = res.data;
          this.$message({
            message: message,
            type: success?'success':'error'
          });
          this.currentpage=1;
          this.getDtypes();
        });
      }).catch(() => {

      });
    }
  },
  mounted() {
    this.getDtypes();
  },
}

</script>

<style scoped>

</style>